<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>文章列表</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/dist/js/adminlte.min.js"></script>

    <link rel="stylesheet" type="text/css" href="/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="/dist/css/skins/skin-blue.min.css">

    <style>

        .update {
            display: inline;
            padding-left: 5px;
            padding-right: 5px;
            background: #00BCD4;
            color: white;
            border-right-width: 2px;
            margin-right: 5px;
        }

        .delete {
            display: inline;
            padding-left: 5px;
            padding-right: 5px;
            background: red;
            color: white;
            border-right-width: 2px;
            margin-right: 5px;
        }

    </style>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header th:include="admin_public :: header" class="main-header">
    </header>

    <!-- Left side column. contains the logo and sidebar -->
    <aside th:include="admin_public :: sidebar" class="main-sidebar">
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">


        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">请输入文章名进行查询</h3>
                        </div>
                        <input type="text" class="form-control" name="articleTitle" id="articleTitle"
                               placeholder="ArticleTitle" style="width:20%;display: inline;">
                        <div onclick="selectByArticleTitle()"
                             style="width:15%;display: inline;border: 1px solid #000000;padding: 6px;height: 32px;">查询
                        </div>

                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example2" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>文章名</th>
                                    <th>作者</th>
                                    <th>文章类型</th>
                                    <th>图片</th>
                                    <th>文章摘要</th>
                                    <th>创建时间</th>
                                    <th>访问次数</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="tb">
                                <tr th:each="article:${article}">
                                    <td th:text="${article.id}"></td>
                                    <td th:text="${article.articleTitle}"></td>
                                    <td th:text="${article.articleAuthor}"></td>
                                    <td th:text="${article.articleType}"></td>
                                    <td><img th:src="${article.articlePicture}" style="width: 100px;"></td>
                                    <td th:text="${article.articleAbstract}"></td>
                                    <td th:text="${article.createAt}"></td>
                                    <td th:text="${article.readTime}"></td>
                                    <!-- <input type="date" th:value="${#dates.format(user.birthday, 'yyyy-MM-dd HH:mm:ss')}" th:attr="value=#{user.birthday}">-->
                                    <!---->
                                    <td>
                                        <div class="update"><a
                                                th:href="@{'/admin/article/updateArticle?id='+${article.id}}">更改</a>
                                        </div>
                                        <div class="delete"><a th:href="@{'/admin/article/delete?id='+${article.id}}">删除</a>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer th:include="admin_public :: footer" class="main-footer">
    </footer>

    <!-- Control Sidebar -->
    <aside th:include="admin_public :: control" class="control-sidebar control-sidebar-dark">
    </aside>

    <div class="control-sidebar-bg">
    </div>

    <script>

        function selectByArticleTitle() {
            var areahtml = "";
            $.ajax({
                // type: 'post',
                type : 'get',
                url: "/admin/article/selectByArticleTitle",
                //headers: {'Content-type': 'application/json;charset=UTF-8'},
                //contentType:
                dataType: "json",
                //data : JSON.stringify({'id': id }),
                data: {articleTitle: $("#articleTitle").val()},
                //data : "id="+id,
                success: function (result) {

                    for (var i = 0; i < result.length; i++) {
                        areahtml = areahtml
                            + '<tr>'
                            + '<td>' + result[i].id + '</td>'
                            + '<td>' + result[i].articleTitle + '</td>'
                            + '<td>' + result[i].articleAuthor + '</td>'
                            + '<td>' + result[i].articleType + '</td>'
                            + '<td>' + result[i].articlePicture + '</td>'
                            + '<td>' + result[i].articleAbstract + '</td>'
                            + '<td>' + result[i].createAt + '</td>'
                            + '<td>' + result[i].readTime + '</td>'
                            + '<td>'
                            + '<div class="update"><a href=/admin/article/updateArticle?id=' + result[i].id + '>更改</a></div>'
                            //                                <a th:href="@{'/api/v1/user/delete?id='+${user.id}}">删除</a>
                            + '<div class="delete"><a href=/admin/article/delete?id=' + result[i].id + '>删除</a></div>'
                            + '</td>'
                            + '</tr>'
                    }
                    $("#tb").html("");
                    $("#tb").html(areahtml);
                },
                error: function (result) {
                    alert("查询失败");
                }
            })
        }
    </script>


</div>
</body>
</html>
